<template>
    <div>
        <el-form label-width="80px">
            <el-form-item v-for="(it, index) in grades" :key="index" :label="it.name">
                <el-input style="width: 70%;" :disabled="disabled" v-model="it.count"></el-input>
                <div v-show="index === 0" style="display: inline-block;position: absolute;top: -3em;">
                    <el-button  @click="update" style='margin-left: 1em;' 
                    size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button v-show="!disabled"  @click="sure" style='margin-left: 1em;' 
                    size="mini" type="primary" >确定</el-button>
                </div>
                <el-button @click="del(it)" style='margin-left: 1em;' size="mini" type="danger" icon="el-icon-delete" circle></el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'subjectCom',
    data() {
        return {
            grades: [],
            disabled: true,
            userInfo:{}
        }
    },
    beforeDestroy() {
        this.$bus.off('update')
    },
    mounted() {
        this.$bus.$on('update', () => {
            this.getdata()
        })
        this.getdata()
    },
    methods: {
        getdata() {
            let userInfo = this.$store.state.login.userInfo
            this.userInfo = userInfo
            this.$store.dispatch('getStudentInfo', this.userInfo.userid).then(res => {
                if (res) {
                    this.grades = res.data.grades
                }
            })
        },
        update(){
            this.disabled = !this.disabled
        },
        async del(val){
            let result =  await this.$store.dispatch('delSubject',{userid :this.userInfo.userid,subjectName: val.name})
            if(result.code === 200){
                this.getdata()
            }
        },
        async sure(){
            let result = await this.$store.dispatch('updateGades',{userid: this.userInfo.userid,grades:JSON.stringify(this.grades)})
            this.disabled = !this.disabled
            if(result.code === 200){
                this.getdata()
            }
        }
    }
}
</script>

<style  scoped></style>